import React, {useRef, useState} from "react"
import {Image, Text, View} from "@tarojs/components"
import Taro, {useReady} from '@tarojs/taro'
import Nav from '@/components/Nav/Nav'
import SendInput from '@/packageA/components/SendInput/SendInput'
import PageLoading from '@/components/PageLoading/PageLoading'
import Comment from '@/packageA/components/Comment/Comment'
import {fchts} from '@/assets/constant/home'
import {useInputHooks} from '@/hooks/input'
import {useCommentShow, useOperateData} from '@/packageA/hooks/senne'
import {addComment} from '@/packageA/api/scene'
import Loading, {useLoading} from '@/components/Loading/Loading'
import './Scene.scss'

const Scene: React.FC = () => {
  const [avatarUrl, setAvatarUrl] = useState('')
  const other = useRef('https://img0.baidu.com/it/u=216288347,2174882443&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500')

  useReady(() => {
    const userInfo = Taro.getStorageSync('userInfo')
    setAvatarUrl(userInfo.avatarUrl)
  })

  const {show: sendShow, focus, onShowComment, onBack} = useCommentShow()

  const {
    sightInfoDetail, commentList, navigator,
    getCommentDetail, toggleLike
  } = useOperateData()

  const {inputIcons, onclick} = useInputHooks(onShowComment, sightInfoDetail)

  const {show, showLoading, hideLoading} = useLoading()

  async function onConfirm (e) {
    let content = e.detail.value
    if (content) {
      showLoading()
      const commentId = await addComment(content, sightInfoDetail.id as string, '0')
      if (commentId) {
       await getCommentDetail()
      }
      hideLoading()
    }
  }

  return <View className='container'>
    <Nav imageUrl={avatarUrl} />
    <View className='bg_image' style={{backgroundImage: `url(${other.current})`}} />
    <View className='wrap'>
      <View className='box'>
        <View className='nav_lists'>
          {
            fchts.map(item => <View className='item' key={item.url} onClick={() => navigator(item.url)}>
              <Image className='item_img' src={item.iconfont} />
              <Text className='item_text'>{item.desc}</Text>
            </View>)
          }
        </View>
        {
          sightInfoDetail.name ? <View className='detail'>
            <Text className='detail_title'>{sightInfoDetail.name}</Text>
            <View className='detail_introduction'
              dangerouslySetInnerHTML={{__html: sightInfoDetail.summary || ''}}
            />
            <View className='detail_suggest'
              dangerouslySetInnerHTML={{__html: sightInfoDetail.content || ''}}
            />
          </View> : <PageLoading />
        }
        <SendInput
          showMask={!sendShow}
          focus={focus}
          sendInputs={inputIcons}
          cursorSpacing={10}
          onclick={onclick}
          showComment={onShowComment}
          onConfirm={onConfirm}
        />
      </View>
    </View>
    <Loading showLoading={show} show={show} />
    <Comment
      show={sendShow}
      onBack={onBack}
      list={commentList}
      authorId={sightInfoDetail.id}
      toggleLike={toggleLike}
    />
  </View>
}

export default Scene
